<template>
    <div>
      <Row class="formRow">
        <!--<Col span="1" class="rightRow">项目代码</Col>-->
        <!--<Col span="3" class="leftRow"><Input v-model="formInline.projectCode" placeholder="项目代码" clearable style="width: 100%" size="large"></Input></Col>-->
        <Col span="2" class="rightRow">英文名称</Col>
        <Col span="3" class="leftRow"><Input v-model="formInline.englishName" placeholder="英文名称" clearable style="width: 100%" size="large"></Input></Col>
        <Col span="2" class="rightRow">中文名称</Col>
        <Col span="3" class="leftRow"><Input v-model="formInline.chinaName" placeholder="中文名称" clearable style="width: 100%" size="large"></Input></Col>
        <Col span="2" class="rightRow">项目类型</Col>
        <Col span="3" class="leftRow">
        <Select  size="large" style="width:100%" v-model="formInline.projectTypeId" filterable>
          <Option v-for="p in projectType" :value="p.id" :key="p.id">{{p.proTypeName}}</Option>
        </Select>
        </Col>
        <Col span="2" class="rightRow">是否启用</Col>
        <Col span="2" class="leftRow">
        <Select  size="large" style="width:100%" v-model="formInline.valid">
          <Option  value="1" >是</Option>
          <Option  value="0" >否</Option>
        </Select>
        </Col>
        <Col span="5" class="leftRow">
        <Button type="primary" @click="onSubmit">查询</Button>
        <Button type="primary" @click="resetForm">重置</Button>
        <Button type="primary" @click="onAdd">添加</Button>
        </Col>
      </Row>

      <Table :data="tableData" :columns="cloums" stripe :loading="loading"  style="margin-top: 20px"></Table>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :total="total" :placement="placement" :current="1" @on-change="changePage" show-total show-elevator show-sizer @on-page-size-change="changeSize"></Page>
        </div>
      </div>

      <Modal
        v-model="add"
        title="添加"
        @on-ok="addOk"
        @on-cancel="cancel('您取消了操作')" width="600">
        <Row>
          <Col span="12"> <span class="ModelInputTitle">物价编码</span><Input v-model="addForm.priceCode"  style="width: 200px" placeholder="物价编码"></Input></Col>
          <Col span="12"> <span class="ModelInputTitle">英文名称</span><Input v-model="addForm.englishName"  style="width: 200px" placeholder="英文名称"></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12"><span class="ModelInputTitle">中文名称</span><Input v-model="addForm.chinaName"  style="width: 200px" placeholder="中文名称"></Input></Col>
          <Col span="12"><span class="ModelInputTitle">单位</span><Input v-model="addForm.unit"  style="width: 200px" placeholder="单位"></Input></Col>
        </Row>

        <Row style="margin-top: 20px">
          <Col span="12"><span class="ModelInputTitle">精度</span><Input v-model="addForm.precision"  style="width: 200px" placeholder="精度"></Input></Col>
          <Col span="12"><span class="ModelInputTitle">项目类型</span>
          <Select  size="large" style="width:198px" v-model="addForm.projectTypeId" filterable>
            <Option v-for="p in projectType" :value="p.id" :key="p.id">{{p.proTypeName}}</Option>
          </Select></Col>
        </Row>

        <Row style="margin-top: 20px">
          <Col span="12"><span class="ModelInputTitle">样品保存</span><Input v-model="addForm.specimenSaveDiction" style="width: 200px" placeholder="样品保存"></Input></Col>
          <Col span="12"><span class="ModelInputTitle">样品要求</span><Input v-model="addForm.specimenRequest"  style="width: 200px" placeholder="样品要求"></Input></Col>
        </Row>

        <Row style="margin-top: 20px">
          <Col span="12"><span class="ModelInputTitle">实验方法</span><Input v-model="addForm.experimentalMethod"  style="width: 200px" placeholder="实验方法"></Input></Col>
          <Col span="12"><span class="ModelInputTitle">参考范围</span><Input v-model="addForm.referenceRanges" style="width: 200px" placeholder="参考范围"></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12"><span class="ModelInputTitle">报告时间</span><Input v-model="addForm.reportTime" style="width: 200px" placeholder="报告时间"></Input> </Col>
          <Col span="12"><span class="ModelInputTitle">是否有效</span>
            <Select  size="large" style="width:198px" v-model="addForm.valid">
              <Option  value="1" >是</Option>
              <Option  value="0" >否</Option>
            </Select>
          </Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="24"><span class="ModelInputTitle">关键字</span><Input v-model="addForm.keyNames"  style="width: 485px" placeholder="多个关键字以空格隔开"></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="24"><span class="ModelInputTitle">分词</span><Input v-model="addForm.splitWord"  style="width: 485px" placeholder="分词"></Input></Col>
        </Row>

        <Row style="margin-top: 20px">
          <Col span="24">   <span class="ModelInputTitle">临床用途</span><Input v-model="addForm.influenceFactor" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="临床用途"  style="width: 485px"></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="24">   <span class="ModelInputTitle">异常结果解读</span><Input v-model="addForm.kpResultExplain" type="textarea" :autosize="{minRows: 5,maxRows: 20}"  style="width: 485px"></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="24">   <span class="ModelInputTitle">观察重点</span><Input v-model="addForm.resultExplain" type="textarea" :autosize="{minRows: 5,maxRows: 20}"  style="width: 485px"></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="24">   <span class="ModelInputTitle">养护重点</span><Input v-model="addForm.remark" type="textarea" :autosize="{minRows: 5,maxRows: 20}"  style="width: 485px"></Input></Col>
        </Row>

      </Modal>

      <Modal
        v-model="edit"
        title="编辑"
        @on-ok="editOk"
        @on-cancel="cancel('您取消了操作')" width="600">
        <Row>
          <Col span="12"> <span class="ModelInputTitle">ID</span><Input v-model="editForm.id"  disabled style="width: 200px" placeholder="物价编码"></Input></Col>
          <Col span="12"> <span class="ModelInputTitle">项目代码</span><Input v-model="editForm.projectCode" disabled style="width: 200px" placeholder="项目代码"></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12"> <span class="ModelInputTitle">物价编码</span><Input v-model="editForm.priceCode"  style="width: 200px" placeholder="物价编码"></Input></Col>
          <Col span="12"> <span class="ModelInputTitle">英文名称</span><Input v-model="editForm.englishName"  style="width: 200px" placeholder="英文名称"></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12"><span class="ModelInputTitle">中文名称</span><Input v-model="editForm.chinaName"  style="width: 200px" placeholder="中文名称"></Input></Col>
          <Col span="12"><span class="ModelInputTitle">单位</span><Input v-model="editForm.unit"  style="width: 200px" placeholder="单位"></Input></Col>
        </Row>

        <Row style="margin-top: 20px">
          <Col span="12"><span class="ModelInputTitle">精度</span><Input v-model="editForm.precision"  style="width: 200px" placeholder="精度"></Input></Col>
          <Col span="12"><span class="ModelInputTitle">项目类型</span>
          <Select  size="large" style="width:198px" v-model="editForm.projectTypeId" filterable>
            <Option v-for="p in projectType" :value="p.id" :key="p.id">{{p.proTypeName}}</Option>
          </Select></Col>
        </Row>

        <Row style="margin-top: 20px">
          <Col span="12"><span class="ModelInputTitle">样品保存</span><Input v-model="editForm.specimenSaveDiction" style="width: 200px" placeholder="样品保存"></Input></Col>
          <Col span="12"><span class="ModelInputTitle">样品要求</span><Input v-model="editForm.specimenRequest"  style="width: 200px" placeholder="样品要求"></Input></Col>
        </Row>

        <Row style="margin-top: 20px">
          <Col span="12"><span class="ModelInputTitle">实验方法</span><Input v-model="editForm.experimentalMethod"  style="width: 200px" placeholder="实验方法"></Input></Col>
          <Col span="12"><span class="ModelInputTitle">参考范围</span><Input v-model="editForm.referenceRanges" style="width: 200px" placeholder="参考范围"></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12"><span class="ModelInputTitle">报告时间</span> <Input v-model="editForm.reportTime" style="width: 200px" placeholder="报告时间"></Input></Col>
          <Col span="12"><span class="ModelInputTitle">是否有效</span>
          <Select  size="large" style="width:198px" v-model="editForm.valid">
            <Option  value="1" >是</Option>
            <Option  value="0" >否</Option>
          </Select>
          </Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="24"><span class="ModelInputTitle">关键字</span><Input v-model="editForm.keyNames"  style="width: 485px" placeholder="多个关键字以空格隔开"></Input></Col>
          <!--<Col span="12"><span class="ModelInputTitle">版本</span><Input v-model="editForm.version" style="width: 200px" placeholder="版本"></Input></Col>-->
        </Row>
        <Row style="margin-top: 20px">
          <Col span="24"><span class="ModelInputTitle">分词</span><Input v-model="editForm.splitWord"  style="width: 485px" placeholder="分词"></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="24">   <span class="ModelInputTitle">临床用途</span><Input v-model="editForm.influenceFactor" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="临床用途"  style="width: 485px"></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="24">   <span class="ModelInputTitle">异常结果解读</span><Input v-model="editForm.kpResultExplain" type="textarea" :autosize="{minRows: 5,maxRows: 20}"  style="width: 485px"></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="24">   <span class="ModelInputTitle">观察重点</span><Input v-model="editForm.resultExplain" type="textarea" :autosize="{minRows: 5,maxRows: 20}"  style="width: 485px"></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="24">   <span class="ModelInputTitle">养护重点</span><Input v-model="editForm.remark" type="textarea" :autosize="{minRows: 5,maxRows: 20}"  style="width: 485px"></Input></Col>
        </Row>

      </Modal>

      <Modal
        v-model="deleteItem"
        title="确认删除"
        @on-ok="deleteItemok"
        @on-cancel="cancel('您取消了操作')"  >
       <p><Icon type="close-circled" color="red" size="24" style="margin-right: 10px"></Icon>确认删除此项么？</p>
      </Modal>

    </div>
</template>
<script type="text/ecmascript-6">
  import axios from "axios"
    export default {
        data() {
            return {
              page: 1,
              pageSize:10,
              projectType:[],//项目类型
              formInline:{
                projectCode:"",
                englishName:"",
                chinaName:"",
                projectTypeId:"",
                valid:""
              },
              add:false,
              addForm:{
                priceCode:"",
                englishName:"",
                chinaName:"",
                unit:"",
                precision:"",
                projectTypeId:"",
                projectTypeName:"",
                specimenSaveDiction:"",
                specimenRequest:"",
                experimentalMethod:"",
                referenceRanges:"",
                reportTime:"",
                valid:"",
                influenceFactor:"",
                version:"",
                keyNames:"",
                resultExplain:"",
                kpResultExplain:"",
                remark:"",
                splitWord:""
              },
              edit:false,
              editForm:{
                id:"",
                projectCode:"",
                priceCode:"",
                englishName:"",
                chinaName:"",
                unit:"",
                precision:"",
                projectTypeId:"",
                projectTypeName:"",
                specimenSaveDiction:"",
                specimenRequest:"",
                experimentalMethod:"",
                referenceRanges:"",
                reportTime:"",
                valid:"",
                influenceFactor:"",
                version:"",
                keyNames:"",
                resultExplain:"",
                kpResultExplain:"",
                remark:"",
                splitWord:""
              },
              placement:"bottom",
              total:0,
              tableData:[],
              loading:true,
              deleteItem:false,//删除模态框
              itemId:"",
              cloums:[
                //{
                  // title: '项目代码',
                   //key: 'projectCode',
                  // width:200,
                  // align:"center"
                // },
                // {
                  // title: '物价编码',
                  // key: 'priceCode',
                  // width:200,
                  // align:"center"
                // },
                {
                  title: '中文名称',
                  key: 'chinaName',
                  width:150,
                  align:"center"
                },
                {
                  title: '英文名称',
                  key: 'englishName',
                  width:120,
                  align:"center"
                },
                {
                  title: '关键字',
                  key: 'keyNames',
                  width:180,
                  align:"center"
                },
                {
                  title: '分词',
                  key: 'splitWord',
                  width:180,
                  align:"center"
                },
                // {
                //   title: '单位',
                 //   key: 'unit',
                  // width:200,
                  // align:"center"
               //  },
                // {
                //   title: '精度',
                //   key: 'precision',
                //   width:200,
                 //  align:"center"
                // },
                {
                  title: '项目类型',
                  key: 'projectTypeName',
                  width:150,
                  align:"center"
                },
                {
                  title: '样品保存',
                  key: 'specimenSaveDiction',
                  width:120,
                  align:"center"
                },
                {
                  title: '样品要求',
                  key: 'specimenRequest',
                  width:120,
                  align:"center"
                },
                {
                  title: '实验方法',
                  key: 'experimentalMethod',
                  width:120,
                  align:"center"
                },
                {
                  title: '参考范围',
                  key: 'referenceRanges',
                  width:180,
                  ellipsis:true,
                  align:"center"
                },
                {
                  title: '临床用途',
                  key: 'influenceFactor',
                  width:350,
                  ellipsis:true,
                  align:"center"
                },
                {
                  title: '异常结果解读',
                  key: 'kpResultExplain',
                  width:350,
                  ellipsis:true,
                  align:"center"
                },
                {
                  title: '观察重点',
                  key: 'resultExplain',
                  width:350,
                  ellipsis:true,
                  align:"center"
                },
                {
                  title: '养护重点',
                  key: 'remark',
                  width:200,
                  ellipsis:true,
                  align:"center"
                },

                {
                  title: '是否有效',
                  key: 'valid',
                  width:120,
                  align:"center"
                },
                {
                  title: '报告时间',
                  key: 'reportTime',
                  width:200,
                  align:"center"
                },

                // {
                 //  title: '创建人',
                 //  key: 'creator',
                  // width:120,
                 //  align:"creator"
              //   },
               //  {
               //    title: '更新人',
                //   key: 'updater',
                //   width:120,
                 //  align:"center"
               //  },
                {
                  title: '操作',
                  fixed: 'right',
                  width:160,
                  align:"center",
                  render:(h,params)=>{
                    return h("div",[
                      h("Button",{
                        props:{
                          type:"info",
                          size:"small"
                        },
                        style:{
                          marginRight:"5px"
                        },
                        on:{
                          click:()=>{
                            console.log(params.row)
                              this.editForm.id = params.row.id;
                              this.editForm.projectCode = params.row.projectCode;
                              this.editForm.priceCode = params.row.priceCode;
                              this.editForm.englishName = params.row.englishName;
                              this.editForm.chinaName = params.row.chinaName;
                              this.editForm.unit = params.row.unit;
                              this.editForm.precision = params.row.precision;
                              this.editForm.projectTypeId = params.row.projectTypeId;
                              this.editForm.projectTypeName = params.row.projectTypeName;
                              this.editForm.specimenSaveDiction = params.row.specimenSaveDiction;
                              this.editForm.specimenRequest = params.row.specimenRequest;
                              this.editForm.experimentalMethod = params.row.experimentalMethod;
                              this.editForm.referenceRanges = params.row.referenceRanges;
                              this.editForm.reportTime = params.row.reportTime;
                              this.editForm.valid = params.row.valid=="是"?"1":"0";
                              this.editForm.influenceFactor = params.row.influenceFactor;
                              this.editForm.version = params.row.version;
                              this.editForm.keyNames = params.row.keyNames;
                              this.editForm.resultExplain = params.row.resultExplain;
                              this.editForm.remark = params.row.remark;
                              this.editForm.kpResultExplain = params.row.kpResultExplain;
                              this.editForm.splitWord = params.row.splitWord;
                              this.edit = true;
                          }
                        }
                      },"编辑"),h("Button",{
                        props:{
                          type:"error",
                          size:"small"
                        },
                        on:{
                          click:()=>{
                            this.deleteItem = true;
                            this.itemId = params.row.id;
                          }
                        }
                      },"删除")
                    ])
                  }
                },
              ]
            }
        },
      mounted(){
          this.getInfo();
          this.init();
      },
      methods:{
        getInfo(){
          axios.defaults.headers.common['Authorization'] = sessionStorage.getItem("token");
          axios.post("/projectType/selectParProjectTypeList").then((res)=>{
            console.log(res)
            if(res.data.code == "000000"){
              this.projectType = res.data.data;
            }else{
              this.$Notice.error({title:res.data.msg})
            }
          })
        },
        init(){
          var qs = require("qs");
          var param = qs.stringify({
            page:this.page,
            pageSize:this.pageSize,
            projectCode:this.formInline.projectCode,
            englishName:this.formInline.englishName,
            chinaName:this.formInline.chinaName,
            projectTypeId:this.formInline.projectTypeId,
            projectTypeName:"",
            valid:this.formInline.valid
          })
          axios.post("repotexplain/selectRepotExplainList",param).then((res)=>{
            console.log(res)
            if(res.data.code =="000000"){
              this.loading = false;
              this.total = res.data.count;
              for(let i=0;i<res.data.data.length;i++){
                res.data.data[i].valid = res.data.data[i].valid=="1"?"是":"否";
                res.data.data[i].reportTime = res.data.data[i].reportTime;
              }
              this.tableData = res.data.data;
            }else{
              this.$Notice.error({
                title:res.data.msg
              })
            }
          })
        },
        onSubmit(){
          this.init();
        },
        resetForm(){
          this.formInline.projectCode = "";
          this.formInline.englishName = "";
          this.formInline.chinaName = "";
          this.formInline.projectTypeId = "";
          this.formInline.valid = "";
          this.page = 1;
          this.pageSize = 10;
          this.init();
        },
        onAdd(){
          this.add = true;
        },
        changePage(page){
          this.loading = true;
          this.page = page;
          this.init();
        },
        changeSize(size){
          this.placement = size>=20?"top":"bottom";
          this.loading = true;
          this.pageSize = size;
          this.init();
        },
        cancel(msg){
          this.$Notice.error({title:msg})
        },
        format(date){
          var d = new Date(date);
          var year = d.getFullYear();
          var month = parseInt(d.getMonth())+1>9?parseInt(d.getMonth())+1:"0"+(parseInt(d.getMonth())+1);
          var day = d.getDate()>9?d.getDate():"0"+d.getDate();
          var h = d.getHours()>9?d.getHours():"0"+d.getHours();
          var m =  d.getMinutes()>9?d.getMinutes():"0"+d.getMinutes();
          var s = d.getSeconds()>9?d.getSeconds():"0"+d.getSeconds();
          return year+"-"+month+"-"+day+" "+h+":"+m+":"+s;
        },
        addOk(){
            for(let i=0;i<this.projectType.length;i++){
              if(this.addForm.projectTypeId == this.projectType[i].id){
                this.addForm.projectTypeName = this.projectType[i].proTypeName;
              }
            }
            var qs = require("qs");
            var param = qs.stringify({
              priceCode:this.addForm.priceCode,
              englishName:this.addForm.englishName,
              chinaName:this.addForm.chinaName,
              unit:this.addForm.unit,
              precision:this.addForm.precision,
              projectTypeId:this.addForm.projectTypeId,
              projectTypeName:this.addForm.projectTypeName,
              specimenSaveDiction:this.addForm.specimenSaveDiction,
              specimenRequest:this.addForm.specimenRequest,
              experimentalMethod:this.addForm.experimentalMethod,
              referenceRanges:this.addForm.referenceRanges,
              reportTime:this.addForm.reportTime,
              valid:this.addForm.valid,
              influenceFactor:this.addForm.influenceFactor,
              version:"",
              keyNames:this.addForm.keyNames,
              resultExplain:this.addForm.resultExplain,
              kpResultExplain:this.addForm.kpResultExplain,
              remark:this.addForm.remark,
              splitWord:this.addForm.splitWord
            });
            axios.post("repotexplain/saveRepotExplain",param).then((res)=>{
              if(res.data.code =="000000"){
                this.$Notice.success({
                  title:"添加成功"
                });
                this.init();
              }else{
                this.$Notice.error({
                  title:res.data.msg
                })
              }
            })
        },
        editOk(){
            for(let i=0;i<this.projectType.length;i++){
              if(this.editForm.projectTypeId == this.projectType[i].id){
                this.editForm.projectTypeName = this.projectType[i].proTypeName;
              }
            }
            var qs = require("qs");
            var param = qs.stringify({
              id:this.editForm.id,
              projectCode:this.editForm.projectCode,
              priceCode:this.editForm.priceCode,
              englishName:this.editForm.englishName,
              chinaName:this.editForm.chinaName,
              unit:this.editForm.unit,
              precision:this.editForm.precision,
              projectTypeId:this.editForm.projectTypeId,
              projectTypeName:this.editForm.projectTypeName,
              specimenSaveDiction:this.editForm.specimenSaveDiction,
              specimenRequest:this.editForm.specimenRequest,
              experimentalMethod:this.editForm.experimentalMethod,
              referenceRanges:this.editForm.referenceRanges,
              reportTime:this.editForm.reportTime,
              valid:this.editForm.valid,
              influenceFactor:this.editForm.influenceFactor,
              version:this.editForm.version,
              keyNames:this.editForm.keyNames,
              resultExplain:this.editForm.resultExplain,
              kpResultExplain:this.editForm.kpResultExplain,
              remark:this.editForm.remark,
              splitWord:this.editForm.splitWord
            });
            axios.post("repotexplain/updateRepotExplain",param).then((res)=>{
              if(res.data.code =="000000"){
                this.$Notice.success({
                  title:"修改成功"
                });
                this.init();
              }else{
                this.$Notice.error({
                  title:res.data.msg
                })
              }
            })
        },
        deleteItemok(){
          var qs = require("qs");
          var param = qs.stringify({
            id:this.itemId
          })
          axios.post("repotexplain/delRepotExplain",param).then((res)=>{
              if(res.data.code == "000000"){
                this.$Notice.success({title:"删除成功"});
                this.init();
              }else{
                this.$Notice.error({title:res.data.msg})
              }
          })
        }
      }
    }
</script>
<style scoped>
  .formRow{
    height: 38px;
    line-height: 38px;
  }
</style>
